import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';

import { ActionSheet } from '../pages/action-sheet/action-sheet';
import { Alert } from '../pages/alert/alert';
import { App } from '../pages/app/app';
import { Badge } from '../pages/badge/badge';
import { Button } from '../pages/button/button';
import { Card } from '../pages/card/card';
import { Checkbox } from '../pages/checkbox/checkbox';
import { Chip } from '../pages/chip/chip';
import { Datetime } from '../pages/datetime/datetime';
import { Fab } from '../pages/fab/fab';
import { Icon } from '../pages/icon/icon';
import { InfiniteScrollPage } from '../pages/infinite-scroll/infinite-scroll';
import { Input } from '../pages/input/input';
import { Item } from '../pages/item/item';
import { Label } from '../pages/label/label';
import { List } from '../pages/list/list';
import { Loading } from '../pages/loading/loading';
import { Menu } from '../pages/menu/menu';
import { Modal } from '../pages/modal/modal';
import { NavPage } from '../pages/nav/nav';
// import { Note } from '../pages/note/note';
// import { Option } from '../pages/option/option';
// import { Picker } from '../pages/picker/picker';
import { Popover } from '../pages/popover/popover';
import { Radio } from '../pages/radio/radio';
import { Range } from '../pages/range/range';
import { RefresherPage } from '../pages/refresher/refresher';
import { Scroll } from '../pages/scroll/scroll';
import { Searchbar } from '../pages/searchbar/searchbar';
import { Segment } from '../pages/segment/segment';
import { Select } from '../pages/select/select';
import { ShowHideWhen } from '../pages/show-hide-when/show-hide-when';
import { Slides } from '../pages/slides/slides';
// import { Spinner } from '../pages/spinner/spinner';
// import { TabClick } from '../pages/tab-click/tab-click';
// import { Tabs } from '../pages/tabs/tabs';
import { Toast } from '../pages/toast/toast';
import { Toggle } from '../pages/toggle/toggle';
import { Toolbar } from '../pages/toolbar/toolbar';
// import { Typography } from '../pages/typography/typography';
// import { VirtualScroll } from '../pages/virtual-scroll/virtual-scroll';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = Menu;

  pages: Array<{title: string, component: any}>;

  constructor(public platform: Platform) {
    this.initializeApp();
    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Action Sheet', component: ActionSheet },
      { title: 'Alert', component: Alert },
      { title: 'App', component: App },
      { title: 'Badge', component: Badge },
      { title: 'Button', component: Button },
      { title: 'Card', component: Card },
      { title: 'Checkbox', component: Checkbox },
      { title: 'Chip', component: Chip },
      { title: 'Datetime', component: Datetime },
      { title: 'Fab', component: Fab },
      { title: 'Home', component: Menu },
      { title: 'Icon', component: Icon },
      { title: 'Infinite scroll', component: InfiniteScrollPage },
      { title: 'Input', component: Input },
      { title: 'Item', component: Item },
      { title: 'Label', component: Label },
      { title: 'List', component: List },
      { title: 'Loading', component: Loading },
      { title: 'Modal', component: Modal },
      { title: 'Nav', component: NavPage },
      // { title: 'Note', component: Note },
      // { title: 'Option', component: Option },
      // { title: 'Picker', component: Picker },
      { title: 'Popover', component: Popover },
      { title: 'Radio', component: Radio },
      { title: 'Range', component: Range },
      { title: 'Refresher', component: RefresherPage },
      { title: 'Scroll', component: Scroll },
      { title: 'Searchbar', component: Searchbar },
      { title: 'Segment', component: Segment },
      { title: 'Select', component: Select },
      { title: 'Show-hide-when', component: ShowHideWhen },
      { title: 'Slides', component: Slides },
      // { title: 'Spinner', component: Spinner },
      // { title: 'Tab Click', component: TabClick },
      // { title: 'Tabs', component: Tabs },
      { title: 'Toast', component: Toast },
      { title: 'Toggle', component: Toggle },
      { title: 'Toolbar', component: Toolbar },
      // { title: 'Typography', component: Typography },
      // { title: 'Virtual Scroll', component: VirtualScroll },
    ];

  }

  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
	    setTimeout(() => {
		    Splashscreen.hide();
	    }, 100);
	    StatusBar.styleDefault();
    });
  }

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }
}
